import React, { Component } from 'react'
import style from './userInfo.module.scss';
import { Toast } from 'antd-mobile';
import { connect } from 'react-redux'
import { changeIsLoginAction } from '@/store/modules/User/userActiveCreate.js'

class User extends Component {
    render() {
        return (
            <div className={style.userInfoBox}>
                <div className={style.headPortraitBox} onClick={() => Toast.offline('尽请期待 !!!', 1.5)} >
                    <span>头像</span>
                    <div className={style.headPortraitRight}>
                        <img src={require('@/static/imges/headPortrait.webp')} className={style.headPortrait} alt="" />
                        <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                    </div>
                </div>
                <div className={style.headPortraitBox} onClick={() => Toast.offline('尽请期待 !!!', 1.5)} >
                    <span>用户名</span>
                    <div className={style.userName}>{this.props.userInfo.phone}</div>
                </div>
                <div className={style.seizeASeat}>账号绑定</div>
                <div className={style.headPortraitBox} onClick={() => Toast.offline('尽请期待 !!!', 1.5)} >
                    <div>
                        <i className={'iconfont icon-shouji ' + style.userPhone}></i>
                        <span>手机</span>
                    </div>
                    <div className={style.headPortraitRight}>
                        <span className={style.userPassword}>{this.props.userInfo.code}</span>
                        <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                    </div>
                </div>
                <div className={style.seizeASeat}>安全设置</div>
                <div className={style.headPortraitBox} onClick={() => Toast.offline('尽请期待 !!!', 1.5)} >
                    <span>登录密码</span>
                    <div className={style.headPortraitRight}>
                        <span className={style.changepassword}>修改</span>
                        <i className={'iconfont icon-jiantou ' + style.userLoginJiantouTwo}></i>
                    </div>
                </div>
                <div className={style.outLogin} onClick={this.ouLogin}>退出登录</div>
            </div>
        )
    }
    componentDidMount() {
        if (!this.props.islogin) {
            this.props.history.push('/home')
        }
    }
    ouLogin = () => {
        Toast.success('退出成功', 1.5, () => {
            this.props.history.push('/home')
        })
        this.props.changeLoginTypeFn(false)
    }
}

const stateToProps = (state) => {
    // console.log(state, 456456456);
    return {
        islogin: state.user.isLogin,
        userInfo: state.user.userInfo
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changeLoginTypeFn: (value) => {//修改登录状态
            let action = value;
            dispatch(changeIsLoginAction(action))
        }
    }
}


export default connect(stateToProps, dispatchToProps)(User)
